<script>
import AreaCommon from "@/components/comp/account_com/AreaCommon.vue";

export default {
  name: "AddAccountDialog",
  components: {AreaCommon},
  data(){
    //电话格式验证
    var checkPhoen = (rule, value, callback) =>{
      if (!value) {
        return callback(new Error('请输入手机号码'));
      }else{
        const regExp = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
        if(regExp.test(value)){
          callback();
        }else{
          callback(new Error('手机格式不正确'));
        }
      }
    };

    return {
      dialogVisible:false,
      form: {
        id:'',
        uname:'',
        realName: '',
        gender:'',
        phone:'',
        role:1,
        birthday:'',
        cardType:'',
        cardNo:'',
        qualification:'',//学历
        areaName:'',
        areaCode:'',
        address:'',//详细地址
        backField1:'', //备用字段：继往病史
        hjArea:'',
        hjAreaCode:''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      edit_acc_id:'',
    rules:{
        uname:[
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
        ],
        realName:[
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        gender:[{ required: true, message: '请选择性别', trigger: 'change' }],
        birthday:[{ required: true, message: '请输入生日', trigger: 'blur' }],
        phone:[{ validator:checkPhoen, required: true,trigger: 'blur' }],
        backField1:[{ min: 0, max: 400, message: '请控制在400个字符以内', trigger: 'blur' }]
      }
    }
  },
  methods:{
    // 父元素调用此方法，传入用户id
    show_dialog(accId) {
        this.dialogVisible = true;
        this.edit_acc_id = accId;
    },

    //弹出显示之后
    dia_open(){
      //1、清除表单数据
      this.$refs.user_form.resetFields();
      //2、清除区域信息
      this.$refs.area.clear_area();
      this.$refs.hj.clear_area();
      //3、填充用户信息到表单中
      this.get_tar_account();
    },

    //获取要修改的用户信息，并判断是用户角色，还是操作员角色，修改成功后操作不同
    get_tar_account(){

        if(this.edit_acc_id){
          this.$http.get('accounts/get_one?id='+this.edit_acc_id).then(res =>{
            this.fill_user_data(res.data.data);
          })
        }else{
          //用户个人信息修改，从SessionStorage中获取用户信息即可
          const account = JSON.parse(sessionStorage.getItem("account"));
          this.fill_user_data(account);
        }

    },



    //填充数据到表单中
    fill_user_data(account){
      //填充数据，根据id获取登陆的用户信息

      this.form.uname = account.uname;

      //填充一般数据
      this.form.id = account.id;
      this.form.realName = account.realName;
      this.form.gender = account.gender+"";
      this.form.phone = account.phone;
      this.form.birthday = account.birthday;
      this.form.cardType = account.cardType;
      this.form.cardNo = account.cardNo;
      this.form.qualification = account.qualification;
      this.form.address = account.address;
      this.form.backField1 = account.backField1;
      //填充地址信息，若重新选择，其值会修改
      this.form.areaCode = account.areaCode;
      this.form.areaName = account.areaName;

      this.form.hjArea = account.hjArea;
      this.form.hjAreaCode = account.hjAreaCode;

      //填充区域菜单
      this.$refs.area.fill_area(account.areaCode);
      this.$refs.hj.fill_area(account.hjAreaCode);

      // const area_codes = account.areaCode.split(",");
      // this.form.area1 = Number(area_codes[0]);
      // this.select_first_area(Number(area_codes[0]));
      // this.form.area2 = Number(area_codes[1]);
      // this.select_second_area(Number(area_codes[1]));
      // this.form.area3 = Number(area_codes[2]);
    },


    //获取现居地址的区域信息
    get_address_area(area_name,area_code){
      this.form.areaName = area_name;
      this.form.areaCode = area_code;
    },

    //获取户籍地址
    get_huji(area_name,area_code){
      this.form.hjArea = area_name;
      this.form.hjAreaCode = area_code;
    },



    //提交表单
    onSubmit() {
      const _this = this;
      this.$refs.user_form.validate((valid) => {
          if(valid){
            _this.$http.post('accounts/update_acc',_this.form).then(res=>{
                if(res.data.success){
                  _this.dialogVisible = false;
                  _this.$message.success("修改成功");
                  if(!_this.edit_acc_id){
                     sessionStorage.setItem("account",JSON.stringify(res.data.data));
                  }
                  _this.$emit('updated_user');
                }else{
                  _this.$message.error(res.data.errMsg);
                }
              })
          }
      });
    },
  }
}
</script>

<template>
  <el-dialog
      title="修改个人信息"
      :visible.sync="dialogVisible"
      width="35%"
      @opened="dia_open"
      :close-on-click-modal="false"
  >

    <el-form   ref="user_form" :model="form" :rules="rules" label-width="80px" size="small"  >

      <el-form-item label="账号" prop="uname">
        <el-input v-model="form.uname" placeholder="默认密码：qq123456" disabled></el-input>
      </el-form-item>

      <el-form-item label="姓名" prop="realName">
        <el-input v-model="form.realName"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-select  v-model="form.gender" placeholder="请选择性别" style="width: 100%">
          <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>

      <el-form-item label="出生日期" prop="birthday">
        <div class="block" >
          <el-date-picker
              style="width: 100%"
              v-model="form.birthday"
              type="date"
              value-format="yyyy-MM-dd hh:mm:ss"
              :picker-options="pickerOptions"
              placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="证件类型">
        <el-select  v-model="form.cardType" placeholder="请选择证件类型" style="width: 100%">
          <el-option label="学生证" value="学生证"></el-option>
          <el-option label="身份证" value="身份证"></el-option>
          <el-option label="其它" value="其它"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="证件号码">
        <el-input v-model="form.cardNo"></el-input>
      </el-form-item>

      <el-form-item label="学历">
        <el-select  v-model="form.qualification" placeholder="请选择" style="width: 100%">
          <el-option label="无" value="无"></el-option>
          <el-option label="小学" value="小学"></el-option>
          <el-option label="初中" value="初中"></el-option>
          <el-option label="高中" value="高中"></el-option>
          <el-option label="大专" value="大专"></el-option>
          <el-option label="本科" value="本科"></el-option>
          <el-option label="硕士" value="硕士"></el-option>
          <el-option label="博士" value="博士"></el-option>
          <el-option label="其它" value="其它"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="现居地址" >
        <AreaCommon ref="area" @choosd_area="get_address_area" :parent_area_code="form.areaCode"></AreaCommon>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>

      <el-form-item label="户籍地址" >
        <AreaCommon ref="hj" @choosd_area="get_huji" :parent_area_code="form.hjAreaCode"></AreaCommon>
      </el-form-item>

      <el-form-item label="继往病史" prop="backField1">
        <el-input type="textarea" :rows="3"
                  maxlength="400" show-word-limit
                  v-model="form.backField1"></el-input>
      </el-form-item>



      <el-form-item align="right">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>


  </el-dialog>
</template>

<style >
.el-dialog > .el-dialog__body{
  //border-top: 1px solid #e9e9e9;
  padding-top: 10px;
  padding-bottom: 10px;
}

</style>